<template>
  <div>
    <h2>reactive测试</h2>
    <h3 @click="changeName">name:{{ state.name }}</h3>
    <button @click="add">添加演员</button>
    <ul>
      <li v-for="(item, index) in state.people" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  components: {},
  setup () {
    let state = reactive({
      name: '八佰',
      people: ['欧豪', '张译', '王千源']
    })
    let changeName = () => {
      state.name = "大头儿子小头爸爸"
    }
    let add = () => {
      state.people.push('刘德华')
    }
    return {state, changeName, add}
  }
}
</script>

<style></style>
